<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华联</title>
    <meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta content=yes name=apple-touch-fullscreen>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
            height: 100%;
        }
        body{
            height: 100%;
        }
        h2{
            font-size: 2rem;
            text-align: center;
            margin-top: 2rem;
            width: 100%;
            height: 3rem;
            color: #dd047e;
            margin-bottom: 2rem;
        }
        div.tip{
            font-size: 1.4rem;
            color: #dd047e;
            text-align: center;
            margin: 0 auto;
        }
        h3{
            font-size: 1rem;
            color: #dd047e;
        }
        .btn{
            width: 100%;
            height: 4rem;
            margin-top: 2rem;
            outline: none;
            border: 1px solid #eee;
            box-shadow: 0 0 1px 1px #999;
            background: rgba(0,0,0,0.3);
            color: #fff;
        }
        #cpnBox,#cpnBox2{
            width: 100%;
            padding: 0 2rem;
            overflow: auto;
        }
        .list{
            width: 28rem;
            margin-bottom: 1.6rem;
            height: 8rem;
            position: relative;
        }
        .bg{
            width: 100%;
            height: 8rem;
        }
        .tit{
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.6);
            width: 100%;
            height: 8rem;

        }
        .tit img{
            width: 8rem;
            height: 8rem;
        }
        #box{
            width: 32rem;
            height: 80%;
            position: fixed;
            background: #fff;
            left: 0;
            top: 15%;
            display: none;
            border-radius: 10px;
        }
        #box2{
            width: 32rem;
            height: 80%;
            position: fixed;
            background: #fff;
            left: 0;
            top: 15%;
            display: none;
            border-radius: 10px;
        }
        .con{
            width: 26rem;
            height: calc(100% - 8rem);
            border: 2px solid #45177d;
            margin: 3rem 0 0 3rem;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
        }
        .role{
            height: 19rem;
            overflow: scroll;
        }
        h3{
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1rem;
            color: #45177d;
        }

        h3 span{
            font-size:1rem ;
            color: #45177d;
        }
        .con>p{
            font-weight: bold;
            font-size: 1rem;
            margin-bottom: 1rem;
            color: #45177d;
        }
        .con p:nth-child(2){
            font-weight: bold;
        }
        .con p span{
            color: #45177d;
            padding-left: 3rem;
        }
        .ok{
            width: 10rem;
            height: 4rem;
            background: rgba(255,255,255,0.5);
            border: 0;
            box-shadow: 0 0 1px 1px #eee;
            outline: none;
            margin-top: 4rem;
        }
        .no{
            width: 10rem;
            height: 4rem;
            background: rgba(0,0,0,0.5);
            border: 0;
            box-shadow: 0 0 1px 1px #eee;
            outline: none;
            margin-left: 3rem;
        }
        .layui{
            width: 16rem;
            height: 8rem;
            background: rgba(0,0,0,0.7);
            color: #fff;
            font-size: 1.6rem;
            text-align: center;
            line-height: 8rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -8rem;
            margin-top: -4rem;
            display: none;
        }
        #shenqing2{
            width: 100%;
            height: 4rem;
            margin-top: 2rem;
            outline: none;
            border: 1px solid #45177d;
            background:#999;
            color: #45177d;
            border-radius: 10px;
        }
        #shenqing{
            width: 100%;
            height: 4rem;
            margin-top: 2rem;
            outline: none;
            border: 1px solid #45177d;
            background:transparent;
            color: #45177d;
            border-radius: 10px;
        }

        hr{
            margin-bottom: 20px;
            margin-top: 20px;
        }
        .close{
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 2rem;
            color: #fff;
            width: 3rem;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            border-radius: 50%;
            background: rgba(0,0,0,0.4);
            text-decoration: none;
            background-image: url("../../images/close.png");
            background-repeat: no-repeat;
            background-size: 50%;
            background-position: center;
        }
        .con .zhuyi{
            color: #000;
        }
        .con .guoqi{
            color: #000;
        }
    </style>
    <script>
        function fn() {
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/640+'px';
        }
        document.addEventListener('DOMContextLoaded',fn,false)
        window.addEventListener('resize',fn);
        window.addEventListener('orientationchange',fn);
        window.addEventListener('load',fn);

    </script>
</head>
<body>
    <!-- <h2>我的优惠劵 <span>请到现场由工作人员兑换</span></h2> -->
    <h2>我的优惠劵</h2>
    <!--<h3 class="h1">可领取</h3>-->
    <div id="cpnBox">
        <!--<div class="list">
            <img class="bg" src="../images/imgbg.png" alt="">
        </div>-->
        <!--<div class="list">
            <img class="bg" src="../images/imgbg.png" alt="">
            <div class="tit">
                <img src="../images/shixiao.png" alt="">
            </div>
        </div>-->
    </div>
    <!--<h3 class="h2">已领取</h3>-->
    <div id="cpnBox2">
        <!--<div class="list">
            <img class="bg" src="../images/imgbg.png" alt="">
        </div>-->
        <!--<div class="list">
            <img class="bg" src="../images/imgbg.png" alt="">
            <div class="tit">
                <img src="../images/shixiao.png" alt="">
            </div>
        </div>-->
    </div>

    <div id="box">
        <a href="JavaScript:;" class="close"></a>
        <div class="con" data-id="">
            <h3>优惠券详情</h3>
            <p>
                基本规则：
                <span class="zhuyi">
                    使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则
                </span>
            </p>
            <p>
                使用截至：
                <span class="guoqi">

                </span>
            </p>

            <hr>
            <p style="font-weight: bold">详细规则</p>
            <div  class="role">
                注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项
            </div>
            <!--<button id="shenqing">申请</button>-->
            <!--<button class="guanbi">关闭</button>-->
        </div>
        <div class="tip">请到现场由工作人员兑换</div>
        <div class="tip">如有疑问请致电：19981225540</div>
        
    </div>
    <div id="box2">
        <a href="JavaScript:;" class="close"></a>
        <div class="con" data-id="">
            <h3>优惠券详情</h3>
            <p>基本规则<span class="zhuyi">
            使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则
        </span></p>

            <p>
                使用截至时间：
                <span class="guoqi">

                </span>
            </p>
            <hr>
            <p>详细规则</p>
            <div  class="role">
                注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项
            </div>
            <!--<button disabled id="shenqing2">已申请</button>-->
            <!--<button class="guanbi">关闭</button>-->
        </div>
    </div>

    <div id="no" class="layui">
        领取失败！
    </div>
    <div id="yes" class="layui">
        领取成功！
    </div>
</body>
</html>

<script src="../../utils/zepto.min.js"></script>
<script src="../../utils/baseUrl.js"></script>
<script>
    var id;
    var phone=window.localStorage.getItem('phone');
    console.log(phone)
    // /$('h2 span').html(phone);

    function get(){
        $.ajax({
            url:baseUrl+'/user?phone='+phone
            ,headers:{handlerType:"cpnListForWeb"}
            ,type:'delete'
            ,dataType:"json"
            ,success:function (res) {
                console.log(res);
                $('#cpnBox').html('');
                $('#cpnBox2').html('');

                /*if(res.data.userNotGetCpnList.length==0){
                    $('.h1').css('display','none')
                }
                if(res.data.userCpnList.length==0){
                    $('.h2').css('display','none')
                }*/

                for(var i=0;i<res.data.overExpire.length;i++){
                    $('#cpnBox2').append(`
                        <div class="list"
                            data-id="${res.data.overExpire[i].id}"
                            data-name="${res.data.overExpire[i].name}"
                            data-collectExp="${res.data.overExpire[i].collectExp}"
                            data-desc="${res.data.overExpire[i].desc}"
                            data-usedExp="${res.data.overExpire[i].usedExp}"
                        >
                            <div class="role" style="display: none">${res.data.overExpire[i].role}</div>
                            <img class="bg" src="${baseUrl + res.data.overExpire[i].img}" alt="">
                            <div class="tit">
                                <img src="../../images/shixiao.png" alt="">
                            </div>
                        </div>
                    `)
                }
                for(var j=0;j<res.data.userGetCpnIsUsedList.length;j++){
                    if(res.data.userGetCpnIsUsedList[j].isUsed){
                        var con=`<div class="list"
                            data-id="${res.data.userGetCpnIsUsedList[j].id}"
                            data-name="${res.data.userGetCpnIsUsedList[j].name}"
                            data-collectExp="${res.data.userGetCpnIsUsedList[j].collectExp}"
                            data-desc="${res.data.userGetCpnIsUsedList[j].desc}"
                            data-usedExp="${res.data.userGetCpnIsUsedList[j].usedExp}"
>
                                    <div class="role" style="display: none">${res.data.userGetCpnIsUsedList[i].role}</div>
                                    <img class="bg" src="${baseUrl + res.data.userGetCpnIsUsedList[j].img}" alt="">
                                    <div class="tit">
                                        <img src="../../images/hexiao.png" alt="">
                                    </div>
                                </div>`
                    }else{
                        var con=`<div class="list"
                            data-id="${res.data.userGetCpnIsUsedList[j].id}"
                            data-name="${res.data.userGetCpnIsUsedList[j].name}"
                            data-collectExp="${res.data.userGetCpnIsUsedList[j].collectExp}"
                            data-desc="${res.data.userGetCpnIsUsedList[j].desc}"
                            data-usedExp="${res.data.userGetCpnIsUsedList[j].usedExp}"
                            >
                                <div class="role" style="display: none">${res.data.userGetCpnIsUsedList[j].role}</div>
                                <img class="bg" src="${baseUrl+res.data.userGetCpnIsUsedList[j].img}" alt="">
                            </div>`
                    }

                    $('#cpnBox').append(con)
                }
            }
        })
    }
    get();

    $('#cpnBox').on('click','.list',function (ev) {
        $('#box').css('display','block');
        id=$(ev.currentTarget).attr('data-id');
        $('#box .role').html($(ev.currentTarget).find('.role').html())
        $('#box .zhuyi').html($(ev.currentTarget).attr('data-desc'))
        $('#box .guoqi').html($(ev.currentTarget).attr('data-usedExp'))
    });
    $('#cpnBox2').on('click','.list',function (ev) {
        
        /*$('#box2 .con').attr('data-id',$(ev.target).attr('data-id'));*/

        /*$('#box2').css('display','block');
        $('#box2 .role').html($(ev.currentTarget).find('.role').html())
        $('#box2 .zhuyi').html($(ev.currentTarget).attr('data-desc'))
        $('#box2 .guoqi').html($(ev.currentTarget).attr('data-collectExp'))*/

    });
    
    $('#shenqing').click(function (ev) {
        $.ajax({
            url:baseUrl+'/user?cpId='+id+'&phone='+phone,
            type:'post',
            header:{type:"getCpn"},
            dataType:'json',
            success:function (res) {
                if(res.code==1){
                    $('#yes').css('display','block')
                    setTimeout(function () {
                        $('#yes').css('display','none');
                        $('#box').css('display','none');
                        get();
                    },700)
                }
            }
        })
    })
    $('.close').click(function (ev) {
        $(ev.currentTarget).parent().css('display','none');
    })
</script>






